<template>
    <!-- 添加用户信息设置面板 -->
<div class="user-settings-panel">
    <h2>设置</h2>
  <div class="user-settings-content">
    <div class="settings-header">
    </div>
    <div class="settings-section">
        <h3>账号设置</h3>
        <div class="user-info-item" @click="handleUserProfile">
            <div class="user-avatar-name">
                <n-avatar size="small" src= "https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"/>
                <span>{{ userName }}</span>
            </div>
      
            <n-icon size="16"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M8.59 16.59L13.17 12L8.59 7.41L10 6l6 6l-6 6l-1.41-1.41z"/></svg></n-icon>
        </div>

        <div class="user-info-item">
            <span>手机号</span>
            <div class="info-value">
                <span>{{ phoneNumber }}</span>
                <!-- <span class="action-text">更换</span> -->
            </div>
        </div>

        <div class="user-info-item" style="border:0px">
            <span>邮箱</span>
            <div class="info-value">
                <span>{{ email }}</span>
                <div>
       
                </div>
            </div>
        </div>

    
    </div>

    <!-- <div class="settings-section">
        <h3>数据管理</h3>
        <div class="menu-item" @click="handleDataManagement">
            <span>数据管理</span>
            <n-icon size="16"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M8.59 16.59L13.17 12L8.59 7.41L10 6l6 6l-6 6l-1.41-1.41z"/></svg></n-icon>
        </div>
    </div> -->

  




 
    <!-- <div class="settings-section logout">
        <n-button type="error" @click="handleLogout">退出登录</n-button>
  
    </div> -->
  
  </div>
  <div class="user-settings-content" style="margin-top:20px;justify-content: center;
    color: #e75e58;">
        <div class="user-info-item" style="border:0px;justify-content: center;color:#e75e58" @click="openDeleteModal">
            <span>退出登录</span>
       
        </div>
        </div>
        <!-- 退出登录确认模态框 -->
<n-modal
  v-model:show="showDeleteModal"
  preset="card"
  style="width: 400px; border-radius: 12px;"
  :mask-closable="false"
  :close-on-esc="true"
>
  <div style="display: flex; align-items: center; gap: 12px;">
    <n-icon size="24" color="#f56c6c">
      <div class="i-hugeicons:alert-circle"></div>
    </n-icon>
    <span style="font-size: 18px; font-weight: bold;">确认退出登录？    </span>
  </div>
  
  <div style="margin-top: 20px; margin-bottom: 20px; color: #606266;">
    退出登录不会丢失任何数据，你仍可以登录此账号
  </div>
  
  <div style="display: flex; justify-content: flex-end; gap: 12px;">
    <n-button
      quaternary
      size="medium"
      style="border-radius: 8px; padding: 0 20px;"
      @click="closeDeleteModal"
    >
      取消
    </n-button>
    <n-button
      type="error"
      size="medium"
      style="border-radius: 8px; padding: 0 20px;"
      @click="conLoginOut"
    >
      确认退出
    </n-button>
  </div>
</n-modal>
</div>


</template>
<script setup>
// 在 setup 中添加
const showUserSettings = ref(false)
const userName = ref('')
const userAvatar = ref('@/assets/images/a6741749805578_.pic.jpg')
const router = useRouter()
const userStore = useUserStore()
const phoneNumber = ref('')
const email = ref('')
// 打开用户设置面板
const openUserSettings = () => {
    showUserSettings.value = true
}

// 关闭用户设置面板
const closeUserSettings = () => {
    showUserSettings.value = false
}

// 处理各种点击事件
const handleUserProfile = () => {
    console.log('处理用户资料')
}

const handleDataManagement = () => {
    console.log('处理数据管理')
}

const handleHelp = () => {
    console.log('处理使用帮助')
}

const handleFeedback = () => {
    console.log('处理意见反馈')
}

const handleServiceAgreement = () => {
    console.log('处理服务协议')
}

const handlePrivacyPolicy = () => {
    console.log('处理隐私协议')
}

const handleOpenSource = () => {
    console.log('处理开源系统')
}

const handleModelInfo = () => {
    console.log('处理模型介绍')
}
const showDeleteModal=ref(false)
const openDeleteModal = () => {
  showDeleteModal.value = true
}
const closeDeleteModal = () => {
  showDeleteModal.value = false
}
const conLoginOut = () => {
    userStore.logout()
    localStorage.removeItem('conversationId')
    localStorage.removeItem('chatId')
    localStorage.removeItem('title')
    setTimeout(() => {
        router.push('/login')
    }, 500)
    // if(sessionStorage.getItem('user')){
    //     sessionStorage.removeItem('user')
    // }
 
    //  // 实现退出登录逻辑
    //  setTimeout(() => {
    //  window.location.href = '/login'
    //  }, 100);
    

}
const handleLogout = () => {
    console.log('处理退出登录')
    // 实现退出登录逻辑
    router.push('/login')
}
onMounted(() => {
    userName.value = userStore.getUserInfo().username
    phoneNumber.value = userStore.getUserInfo().phone
    email.value = userStore.getUserInfo().email
    console.log('userName', userName)
})
</script>
<style lang="scss" scoped>
.user-settings-panel {
    width: 600px;
 
    background: #f3f3f3;
    padding: 0 20px;
    margin: 0 auto;
   height: 100%;
    width: 100%;
    background: #ffffff;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;

.user-settings-content{
    width: 600px;
    margin-left: 20%;
    background: #f3f3f3;
    padding: 0 20px;
    margin: 10px auto;

    // border-radius: 20px;
    .settings-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;

        h2 {
            font-size: 20px;
            font-weight: 500;
            margin: 0;
        }

        .close-icon {
            cursor: pointer;
            color: #666;
            &:hover {
                color: #333;
            }
        }
    }

    .settings-section {
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid #f0f0f0;

        &:last-child {
            border-bottom: none;
        }

        h3 {
            font-size: 14px;
            color: #999;
            margin: 0 0 12px 0;
            font-weight: normal;
        }
    }

    .user-info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #e4e4e4;
        cursor: pointer;

        .user-avatar-name {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .user-level {
            font-size: 12px;
            color: #999;
        }

        .info-value {
            display: flex;
            align-items: center;
            gap: 12px;
            color: #666;
        }

        .action-text {
            color: #1890ff;
            font-size: 14px;
            cursor: pointer;
            margin-left: 8px;
        }

        .hint-text {
            color: #999;
            font-size: 14px;
        }
    }

    .menu-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        cursor: pointer;

        &:hover {
            background: #f9f9f9;
        }
    }

    .logout {
        text-align: center;
        padding-top: 24px;

        .version-info {
            margin-top: 12px;
            font-size: 14px;
            color: #666;
            text-decoration: underline;
            cursor: pointer;
        }
    }
}


}
</style>